import { defineElement, watcher, ref } from "zipaper"
import "./index.scss"

export let UiSwitch = defineElement({
    template: [{
        name: "div",
        attr: {
            "z-bind:class": "'ui-switch '+(isOn?'on':'off')",
            "z-on:click": function () {
                this.isOn = !this.isOn
                this.$emit("input", this.isOn)
            }
        },
        children: []
    }],
    emits: ["input"],
    props: {
        value: {
            default: false
        }
    },
    data() {
        return {
            isOn: ref(this._props.value)
        }
    },
    created() {
        watcher(this._props, "value", () => {
            this.isOn = this._props.value
        })
    }
})